
<script src="js/LookupView.js"></script>
<script src="js/LookupService.js"></script>

<div class="container">
	<div class="page-header">
		<h1>Lookup Manager</h1>
	</div>
	
	<div id="Lookup_tt" class="easyui-tabs" data-options="tabWidth:118"
		style="height: 580px">
		<div title="Lookup Classify">
			
			<form class="form-inline" method="post" id="lookup_search_form">
				<div style="" class="my-form-group-row">
					<div class="form-group my-form-group">
						<label for="lookupCode" style="">编码:</label>
						<input type="text" class="form-control" style="width:78%;" placeholder="lookup code"
							id="lookupCode"> 
						<span>&nbsp;</span>
					</div>
					<div class="form-group my-form-group" style="width:48%;">
						<label for="lookupName" style="width:18%;text-align:right;">名称:</label>
							<input type="text" class="form-control" style="width:78%;"
							placeholder="lookup name" id="lookupName">
					</div>
				</div>
				<div class="form-search-btn-group" style="width:100%;text-align: center;padding:6px 0px;">
					<button type="submit" class="btn btn-success">
						<i class="fa fa-search"></i> Search 
					</button>
					<button type="submit" class="btn btn-success">
						<i class="fa fa-undo"></i> Reset 
					</button>
				</div>
			</form>
	
			<div style="padding:8px 3px;margin:6px;">
				<button class="btn btn-success actionbtn" type="button">
					<i class="fa fa-plus"></i> 新增
				</button>
				<button class="btn btn-success actionbtn l-btn-disabled" type="button">
					<i class="fa fa-remove fa-trash-o fa-lg" aria-hidden="true"></i> 删除
				</button>
				<div class="pull-right"></div>
				<button class="btn btn-success actionbtn" type="button">
					<i class="fa fa-file-excel-o" aria-hidden="true"></i> Excel 导入导出
				</button>
			</div>
			<div id="lookup_list" style="margin:6px;border:1px solid #EEEEEE;">
				<table class="table table-hover" id="lookup_table">
					<thead>
						<tr>
							<th>序引</th>
							<th>编辑</th>
							<th>编码</th>
							<th>名称</th>
							<th>排序码</th>
							<th>创建用户</th>
							<th>创建时间</th>
							<th>最后更新用户</th>
							<th>最后更新时间</th>
							<th colspan="2">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th><input type="checkbox" class="fa fa-check-square-o" aria-hidden="true"></th>
							<th>
								<a href="######">
								<i class="fa fa-edit fa-2x" aria-hidden="true"></i> 
								</a>
							</th>
							<th>
								<a href="javascript:void(0);"
									onclick="addTabPanel(this)">EMAIL_TYPE</a>
							</th>
							<th>邮件类型</th>
							<th>1</th>
							<th>d3g</th>
							<th>2016/08/18</th>
							<th>d3g</th>
							<th>2016/08/18</th>
							<th>操作</th>
							<th>操作</th>
						</tr>
						<tr>
							<th><input type="checkbox"></th>
							<th>
								<a href="######">
								<i class="fa fa-edit fa-2x" aria-hidden="true"></i> 
								</a>
							</th>
							<th><a href="javascript:void(0);"
								onclick="addTabPanel(this)">Group_EMAIL_TYPE</a></th>
							<th>组邮件类型</th>
							<th>1</th>
							<th>d3g</th>
							<th>2016/08/18</th>
							<th>d3g</th>
							<th>2016/08/18</th>
							<th>操作</th>
							<th>操作</th>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div title="Lookup Item Test">
			
			<div style="margin:8px;">
		        <div class="page-header">
			        <h3>类别信息</h3>
			    </div>
		        <div style="border:none;" class="my-form-group-row">
					<span class="form-group my-form-group" style="width:38%;">
						<label for="lookupCode" style="">类编码:</label>
						<span>Group_EMAIL_TYPE</span>
					</span>
					<span class="form-group my-form-group" style="width:38%;">
						<label for="lookupName" style="width:18%;text-align:right;">类名称:</label>
						<span>组邮件类型</span>
					</span>
				</div>
		    </div>
		    
			<div id="Lookup_Item_tb" style="height: auto; margin: 6px;">
				<button class="btn btn-success actionbtn" type="button">
					<i class="fa fa-plus"></i> 新增行
				</button>
				<button class="btn btn-success actionbtn l-btn-disabled" type="button">
					<i class="fa fa-remove fa-trash-o fa-lg" aria-hidden="true"></i> 删除
				</button>
				<button class="btn btn-success actionbtn l-btn-disabled" type="button">
					<i class="fa fa-save" aria-hidden="true"></i> 保存
				</button>
				<button class="btn btn-success actionbtn" type="button">
					<i class="fa fa-reply" aria-hidden="true"></i>&nbsp;返回
				</button>
			</div>

			<table id="dg2" class="easyui-datagrid">
			</table>
		</div>
	</div>
</div>

<div class="modal" id="lookup_modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary"
					id="lookup_modal_submit">
					<i class="fa fa-save"></i> Save
				</button>
			</div>
		</div>
	</div>
</div>

<script type="text/x-handlebars-template" id="lookup_table_template">
    <table class="table table-hover" id="lookup_table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>地址</th>
                    <th>图标</th>
                    <th>叶子</th>
                    <th>排序码</th>
					<th>有效开始时间</th>
					<th>有效结束时间</th>
                    <th>创建用户</th>
                    <th>创建时间</th>
                    <th>最后更新用户</th>
                    <th>最后更新时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {{#data}}
                    {{> tr}}
                {{/data}}
            </tbody>
        </table>
</script>

<script type="text/x-handlebars-template-partial"
	id="lookup_table_tr_template">
    <tr data-id="{{itemId}}" data-name="{{itemName}}">
        <td>{{itemId}}</td>
        <td>{{itemName}}</td>
        <td>{{url}}</td>
        <td>{{icon}}</td>
        <td>{{leaf}}</td>
        <td>{{orderCode}}</td>
        <td>{{createdUser}}</td>
        <td>{{createdDate}}</td>
        <td>{{updateLastUser}}</td>
        <td>{{updateLastDate}}</td>
        <td>
            <button class="btn btn-xs btn-primary navigation_edit" title="Edit"><i class="fa fa-fw fa-edit"></i></button>
            <button class="btn btn-xs btn-default navigation_delete" title="Delete"><i class="fa fa-fw fa-trash-o"></i></button>
        </td>
    </tr>
</script>

<script type="text/x-handlebars-template"
	id="lookup_modal_form_template">
    <form>
        <input type="hidden" id="itemId" value="{{itemId}}">
		<input type="hidden" id="parentId" value="{{parentId}}">
        <div class="form-group">
            <label for="itemName">名称:</label>
            <input type="text" value="{{itemName}}" class="form-control" id="itemName">
        </div>
        <div class="form-group">
            <label for="url">地址:</label>
            <input type="text" value="{{url}}" class="form-control" id="url">
        </div>
        <div class="form-group">
            <div class="form-group">
            	<label for="orderCode">排序码:</label>
            	<input type="text" value="{{orderCode}}" class="form-control" id="orderCode">
        	</div>
            <div class="form-group">
            	<label for="icon">小图标:</label>
            	<input type="text" value="{{icon}}" class="form-control" id="icon">
        	</div>
        </div>
    </form>
</script>

<script type="text/javascript">
	$(function() {
		$('#dg2').datagrid({
			url : 'datagrid_data1.json',
			method : 'get',
			width : '100%',
			height : 380,
			fitColumns : true,
			singleSelect : true,
			rownumbers : true,
			singleSelect : true,
			pagination : true,
			pageSize : 20,
			columns : [ [ {
				field : 'id',
				title : '',
				checkbox : true
			}, {
				field : 'itemid',
				title : 'Item ID',
				width : 80
			}, {
				field : 'productid',
				title : 'Product ID',
				width : 120
			}, {
				field : 'listprice',
				title : 'List Price',
				width : 80,
				align : 'right'
			}, {
				field : 'unitcost',
				title : 'Unit Cost',
				width : 80,
				align : 'right'
			}, {
				field : 'attr1',
				title : 'Attribute',
				width : 250
			}, {
				field : 'status',
				title : 'Status',
				width : 60,
				align : 'center'
			} ] ],
			onHeaderContextMenu : function(e, field) {
				e.preventDefault();
				if (!cmenu) {
					createColumnMenu();
				}
				cmenu.menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			}
		});
	});
	var cmenu;
	function createColumnMenu() {
		cmenu = $('<div/>').appendTo('body');
		cmenu.menu({
			onClick : function(item) {
				if (item.iconCls == 'icon-ok') {
					$('#dg2').datagrid('hideColumn', item.name);
					cmenu.menu('setIcon', {
						target : item.target,
						iconCls : 'icon-empty'
					});
				} else {
					$('#dg2').datagrid('showColumn', item.name);
					cmenu.menu('setIcon', {
						target : item.target,
						iconCls : 'icon-ok'
					});
				}
			}
		});
		var fields = $('#dg2').datagrid('getColumnFields');
		for (var i = 0; i < fields.length; i++) {
			var field = fields[i];
			var col = $('#dg2').datagrid('getColumnOption', field);
			cmenu.menu('appendItem', {
				text : col.title,
				name : field,
				iconCls : 'icon-ok'
			});
		}
	}
</script>

<script type="text/javascript">
	var index = 0;
	function addTabPanel(node) {
		var text = $(node).text();
		var tabId = 'Tab_' + text;
		console.info($('#' + tabId));
		if ($('#' + tabId).length < 1) {
			$('#Lookup_tt').tabs(
					'add',
					{
						title : text,
						id : tabId,
						tabWidth : text.length * 10 + 30,
						fit : true,
						content : '<div style="padding:10px">Content' + index
								+ '</div>',
						closable : true
					});
		} else {
			$('#Lookup_tt').tabs('select', text);
		}
	}
</script>

<script>
	$(function() {

		// 显示所有产品
		//$('body').hide(); // 隐藏界面
		LookupService.findLookups(function() {
			$('body').show(); // 显示界面
		});

		// 根据关键字查询产品
		$('#lookup_search_form').on('submit', function() {
			var keyword = $('#keyword').val().trim();
			LookupService.findLookupsByName(keyword);
			return false;
		});

		// 点击 Edit 按钮，弹出编辑产品对话框
		$(document).on('click', '#lookup_table .navigation_edit', function() {
			var $tr = $(this).closest('tr');
			var itemId = $tr.data('id');
			LookupService.findLookupById(itemId);
			$('#lookup_modal').modal('show');
			return false;
		});

		// 点击 Delete 按钮，删除产品
		$(document).on(
				'click',
				'#lookup_table .navigation_delete',
				function() {
					var $tr = $(this).closest('tr');
					var itemId = $tr.data('id');
					var name = $tr.data('name');
					console.warn(itemId, name);
					if (confirm('Do you want to delete this navigation? ['
							+ name + ']')) {
						LookupService.deleteLookupById(itemId);
					}
					return false;
				});

		// 点击 Create 按钮，弹出创建产品对话框
		$('#lookup_create').on('click', function() {
			var title = 'Create Lookup';
			var navigation = {
				itemId : 0,
				itemName : '',
				orderCode : '',
				icon : '',
				url : ''
			};
			LookupView.renderLookupModal(title, navigation);
			$('#lookup_modal').modal('show');
		});

		// 点击对话框中的 Save 按钮，创建或更新产品
		$('#lookup_modal_submit').on('click', function() {
			var id = $('#itemId').val();
			var navigation = {
				itemId : id,
				parentId : $('#parentId').val().trim(),
				itemName : $('#itemName').val().trim(),
				orderCode : $('#orderCode').val().trim(),
				icon : $('#icon').val().trim(),
				url : $('#url').val().trim()
			};
			console.warn(id, navigation);
			if (id == 0) {
				LookupService.createLookup(navigation);
			} else {
				LookupService.updateLookup(navigation);
			}
			$('#lookup_modal').modal('hide');
		});
		//
	});
</script>


